{template 'header'}
<link rel="stylesheet" href="{MODULE_URL}assets/css/pic_look.css">
<style>
    .mui-content {
        padding-bottom: 50px;
    }

    .text {
        background: #fff;
        padding: 10px;
    }

    .mui-table-view {
        margin-top: 20px;
    }

    .moeny {
        color: #f0ad4e;
    }

    #my_btn i:before {
        font-size: 1.2rem;
    }

    #my_btn .mui-btn {
        margin-left: 15%;
        margin-top: 20px;
    }

    #text_warp {
        opacity: 0;
        position: absolute;
        top: -999990px;
    }
    #shear {
        font-size: 14px;
        width: 94%;
        margin: 10px auto;
    }
    #img img{
        height: 16rem;
    }
    .mui-content>.mui-table-view:first-child{
        margin-top:0;
    }
</style>
</head>
<body>

<!-- 头部 结束 -->
<div class="mui-content">
    <!-- 文字信息开始 -->
    <!-- 操作按钮结束 -->
    <ul class="mui-table-view">
        <li class="mui-table-view-cell">转发计费：</li>
        <li class="mui-table-view-cell"><span class="moeny">{$setting['task_money']}元 </span>/ 转发 需要上传截图</li>
    </ul>
    <!-- 文字信息结束 -->
    <!-- 图片展示结束 -->
    <div class="mui-table-view mui-grid-view" id="img">
        <li class="mui-table-view-cell mui-media mui-col-xs-6">
            <div class="">
                <img src="{$setting['thumb1']}" data-preview-src data-preview-group='1'
                     class="mui-media-object" id="pic_1">
            </div>
        </li>
        <li class="mui-table-view-cell mui-media mui-col-xs-6">
            <div class="">
                <img src="{$setting['thumb2']}" data-preview-src data-preview-group='1'
                     class="mui-media-object" id="pic_2">
            </div>
        </li>
    </div>
    <!-- 图片展示结束 -->
    <!-- 操作按钮开始 -->
    <div class="mui-row" id="my_btn">
        <div class="mui-col-xs-6 mui-col-sm-6">
            <div class="mui-btn mui-btn-primary" id="btnn" data-clipboard-text='这里放复制内容'>
                <i class="mui-icon mui-icon-compose"></i>
                复制分享语
            </div>
            <!-- <input type="text" readonly  value="这里是Android" id="text_warp"> -->
        </div>
        <div class="mui-col-xs-6 mui-col-sm-6">
            <div class="mui-btn mui-btn-primary" onclick="seve_pic()">
                <i class="mui-icon mui-icon-download"></i>
                保存图片方法
            </div>
        </div>
    </div>
    <ul class="mui-table-view">
        <li class="mui-table-view-cell">要求：</li>
        {loop $setting['detail'] $item}
        <li class="mui-table-view-cell">{$item}</li>
        {/loop}
    </ul>
    <button class="mui-btn mui-btn-primary mui-btn-block" id="shear">请手动分享到微信朋友圈</button>
</div>
<!-- 底部Tab 开始 -->
{template 'nav'}
<!-- 底部Tab结束 -->
<script src="{MODULE_URL}assets/js/jquery.min.js"></script>
<script src="{MODULE_URL}assets/js/mui.min.js"></script>

<script src="{MODULE_URL}assets/js/zoom.js"></script>
<script src="{MODULE_URL}assets/js/mui.previewimage.js"></script>
<script src="{MODULE_URL}assets/js/clipboard.min.js"></script>
<!-- 以上为引入第三方插件 -->
<script src="{MODULE_URL}assets/js/public.js"></script>
<script>
    var user_level = '{$user["user_level"]}';
    if (user_level < 1) {
        mui.alert('您还不是会员，还不能进行发圈任务')
    }

    // 保存图片的方法提示
    function seve_pic() {
        mui.alert('点击图片后,可长按屏幕即可保存')
    };
    //点击复制文字
    var btnn = document.getElementById('btnn');
    var clipboard = new ClipboardJS(btnn);
    clipboard.on('success', function (e) {
        mui.toast('已经复制到剪切板')
    });
    clipboard.on('error', function (e) {
        mui.toast('已经复制到剪切板')
    });
    //图片预览
    mui.previewImage();
</script>
<script src="https://res.wx.qq.com/open/js/jweixin-1.2.0.js"></script>
<script>
    wx.config({
        debug: false,
        appId: '{$jssdk["appId"]}',
        timestamp: '{$jssdk["timestamp"]}',
        nonceStr: '{$jssdk["nonceStr"]}',
        signature: '{$jssdk["signature"]}',
        jsApiList: [
            'checkJsApi',
            'onMenuShareTimeline',
            'onMenuShareAppMessage'
        ]
    });
    wx.ready(function () {

        var shareData = {
            title: "{$shareCon['title']}",
            desc: "{$shareCon['desc']}",
            link: window.location.href,
            imgUrl: "{$shareCon['imgUrl']}",
            success: function (res) {
                mui.alert('已分享,完成任务后别忘记到个人中心上传截图哟',function(){

                });
            },
            cancel: function (res) {
            }
        };

        wx.onMenuShareAppMessage({
            title: "{$shareCon['title']}",
            desc: "{$shareCon['desc']}",
            link: window.location.href,
            imgUrl: "{$shareCon['imgUrl']}",
            success: function (res) {
                mui.alert('已分享,完成任务后别忘记到个人中心上传截图哟',function(){

                });
            }
        });

        wx.onMenuShareTimeline(shareData);
    });

    wx.error(function (res) {
        mui.toast('网络出错，请稍后重试...');
    });
</script>
</body>
</html>